﻿import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600
    property int columnWidth: 120

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 20
        spacing: 30

        Switch { checked: true }
        Switch { checked: false }
        Switch {
            id:switch1
            style: SwitchStyle {
                groove: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 20
                    radius: 10
                    border.color: control.activeFocus ? "darkblue" : "gray"
                    border.width: 1
                }
            }
        }
        Switch {
            id:switch2
            checked: !switch1.checked
            style: SwitchStyle {
                    groove: Rectangle {
                            implicitWidth: 100
                            implicitHeight: 20
                            radius: 10
                            border.color: control.activeFocus ? "darkblue" : "gray"
                            border.width: 1
                    }
                    handle: Rectangle{
                        width: parent.parent.width/2
                        height: control.height
                        radius:10
                        color: "lightsteelblue"
                        border.color: !control.activeFocus ? "darkblue" : "gray"
                        border.width: 0
                    }
                }
            onCheckedChanged: switch1.checked = !checked
        }
        Switch {
            id:switch3
            checked: !switch2.checked
            style: SwitchStyle{
                groove: Rectangle {
                    implicitHeight: 30
                    implicitWidth: 100
                    Rectangle {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom
                        width: parent.width/2 - 2
                        height: 20
                        anchors.margins: 2
                        color: control.checked ? "#468bb7" : "#222"
                        Behavior on color {ColorAnimation {}}
                        Text {
                            font.pixelSize: 23
                            color: "white"
                            anchors.centerIn: parent
                            text: "开"
                        }
                    }
                    Item {
                        width: parent.width/2
                        height: parent.height
                        anchors.right: parent.right
                        Text {
                            font.pixelSize: 23
                            color: "white"
                            anchors.centerIn: parent
                            text: "关"
                        }
                    }
                    color: "#222"
                    border.color: "#444"
                    border.width: 2
                }
                handle: Rectangle {
                    width: parent.parent.width/2
                    height: control.height
                    color: "#444"
                    border.color: "#555"
                    border.width: 2
                }
            }

            onCheckedChanged: switch2.checked = !checked
        }


        Item{
            Layout.fillHeight: true;
        }
    }

}

